<template>
  <view class="card_container">
    <view class="card_top">
      <text style="font-size: 40rpx; color: black; margin-right: 20rpx">{{
        $t("writeOff.myCard")
      }}</text>
      <text
        >{{ $t("order.total1") }}{{ listLength
        }}{{ $t("writeOff.total") }}</text
      >
      <view
        style="float: right; display: inline; margin-left: 10rpx"
        @click="$utils.toUrl('/user/write_off_card/failure_card')"
      >
        {{ $t("writeOff.invalid") }}
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view style="padding-top: 30rpx" v-if="list.length == 0"
      ><u-empty :text="$t('common.noCard')" mode="list"></u-empty
    ></view>
    <view
      class="card_item"
      v-for="(item, index) in list"
      :key="index"
      @click="toDetail(item.id)"
    >
      <view class="item_left"
        ><image
          style="border-radius: 50rpx; width: 60rpx; height: 60rpx"
          :src="item.pic_url"
        ></image
      ></view>
      <view class="item_content">
        <view style="font-size: 34rpx; font-weight: bold">{{
          item.verify_card_name
        }}</view>
        <view style="font-size: 24rpx">{{ item.valid_time }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listLength: "",
      list: [],
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t("title.writeOffCard"),
    });
  },
  onShow() {
    this.getListData();
  },
  methods: {
    toDetail(id) {
      this.$utils.toUrl("/user/write_off_card/write_off_detail?id=" + id);
    },
    async getListData() {
      try {
        const res = await this.$allrequest.coupon.verifyList({
          status: 0,
        });
        if (res.code == 0) {
          this.listLength = res.data.num;
          this.list = res.data.list;
        } else {
          this.$utils.toast(res.msg);
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card_container {
  background-color: rgb(246, 246, 246);
  height: 100vh;
  padding: 20rpx;
}
.card_top {
  color: #666666;
  height: 100rpx;
  line-height: 100rpx;
}
.card_item {
  width: 100%;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  color: black;
  .item_left {
    display: inline-block;
    width: 10%;
  }
  .item_content {
    display: inline-block;
    width: 80%;
    padding-left: 30rpx;
  }
}
</style>
